<template>
	<div v-if="dataInfo">
		<view class="wrap-order-status flex column just-center">
			<view class="status f-32">
				{{ dataInfo.status_text }}
			</view>

			<view class="down-time f-24" v-if="dataInfo.status === '1'">
				请在{{ minute }}分{{ second }}秒内完成支付，逾期订单将自动取消
			</view>
		</view>
	</div>
</template>

<script>
	export default {
		props: {
			/**
			 * 详情数据
			 */
			dataInfo: {
				type: Object,
				default: null,
			},
		},
		data() {
			return {
				downTimer: null, //倒计时
				minute: 0, // 订单超时时间的分钟数
				second: 0, // 订单超时时间的秒数
			};
		},
		watch: {
			"dataInfo.status": {
				handler(newVal, oldVal) {
					clearInterval(this.downTimer);
					if (newVal === "1") {
						this.downTimer = setInterval(() => {
							this.calculationDownTime();
						}, 1000);
					}
				},
				immediate: true,
				deep: true,
			},
		},
		methods: {
			/**
			 * 倒计时计算
			 */
			calculationDownTime() {
				const now = new Date().getTime();
				const end = this.dataInfo.autocancel * 1000;
				const surplus = Math.floor((end - now) / 1000);

				if (surplus <= 0) {
					clearInterval(this.downTimer);
					// this.$emit("overtime");
					return;
				}
				const second = Math.floor(surplus % 60);
				const minute = Math.floor(surplus / 60);

				this.minute = minute.toString().padStart(2, "0");
				this.second = second.toString().padStart(2, "0");
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-order-status {
		width: 100%;
		height: 88rpx;
		overflow: hidden;

		.status {
			color: $bg-text-color;
		}

		.down-time {
			color: $bg-text-color;
			margin-top: 15rpx;
		}
	}
</style>
